<template>
  <div class="search">
    <!-- 在表单内默认 按 enter 键会调教表单 -->
    <form @submit="searching">
      <div>
        <i class="iconsearch"></i>
        <input type="text" v-model='searchstr' @input="inputing" placeholder="请搜索歌曲，歌手，专辑">
        <i class="closeIcon" ref='cha' @click='clearInp'></i>
      </div>
    </form>
    <!-- 组件切换 -->
    <component :is="componentName" :inp='searchstr' @play='$emit("play",$event)' @serach="searchChange"></component>
    <!-- <Loading></Loading> -->
    <div class="history" v-show="searchList.length>0">
      <h5>搜索历史</h5>
      <ul>
        <li v-for="(item,index) in searchList" :key="index" @click="into(item)" >
          <span>{{item}}</span>
          <i class="iconfont icon-fork" @click.stop="delhistory(index)"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// import Loading from '../components/Loading'
// 热门搜索
import hotSearch from '../components/HotSearch'
// 搜索建议
import SearchSuggest from '../components/SearchSuggest'
// 搜索结果
import SearchResult from '../components/SearchResult'

export default {
  name:"Search",
  data(){
    return{
      componentName:'hotSearch',
      searchstr:'',
      searchList:[],
    }
  },
  created(){
   
  },
  methods:{
    delhistory(e){
      this.searchList.splice(e,1)
    },
    inputing(e){
      if(e.target.value==''){
        // 调用 热搜接口
         this.componentName = 'hotSearch'
      }else{
        // 调用搜索提示接口
         this.searchstr=e.target.value;
         this.componentName = 'SearchSuggest'
         this.$refs.cha.style.display='block'
      }
    },
    searching(){
      // 调用 搜索结果
      this.componentName = 'SearchResult'
      this.savedata(this.searchstr)
    },
    // 存储数据
    savedata(value){
      if(this.searchList.indexOf(value) == -1){
          this.searchList.unshift(value);
      }
    },
    clearInp(){
      this.searchstr = null;
      this.componentName = 'hotSearch'
      this.$refs.cha.style.display='none'
    },
    searchChange(e){ // 搜索的自定义事件
      this.searchstr = e;
      this.componentName = 'SearchResult' // 显示搜索
      this.savedata(e)
    },
    into(e){
      this.searchstr = e;
      this.componentName = 'SearchResult'
    }
  },
  components:{
    //  Loading,
     hotSearch,
     SearchSuggest,
     SearchResult
  },
}
</script>
<style lang="less" scoped>
.search{
  form{
    padding: 13px 10px;
    border-bottom: 1px solid #F4F4F4;
    div{
       display: flex;
       padding: 0px 10px;
       height: 30px;
       border-radius:30px ;
       background-color: #ebecec;
       align-items: center;
       i{
        &.iconsearch{
          width: 13px;
          height: 13px;
          background-image: url();
        }
      }
      input{
        flex: 1;
        outline: none;
        border: none;
        height: 30px;
        background: transparent;
        padding-left: 10px;
        font-size: 12px;
      }
      .closeIcon{
        width: 14px;
        height: 14px;
        background-image: url();
        display: none;
      }
    }
    }
    .history{
      h5{
        font-size: 12px;
        line-height: 12px;
        color: #666;
        font-weight: 400;
        padding-left: 10px;
      }
      ul{
        padding-left: 15px;
        li{
          display: flex;
          align-items: center;
          border-bottom: 1px solid rgba(0, 0, 0, .1);
          span{
            flex: 1;
            color: #7d7d7d;
            font-weight: 400;
            line-height: 45px;
          }
          i{
            margin-right: 10px;
          }
        }
      }
    }
  }

</style>